<template>
  <div class="cate">
    <van-sticky>
      <!-- 导航搜索栏 -->
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          shape="round"
        >
          <!-- 搜索框外左侧内容 -->
          <template #left>
            <van-icon
              name="arrow-left"
              style="margin-right: 10px"
              @click="onBack"
            />
          </template>
        </van-search>
      </form>
    </van-sticky>
    <div class="content">
      <!-- 左半边 分类导航 -->
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in navList"
            :key="index"
            :title="item.name"
            :to="`/cate/sub?id=${item.id}`"
          />
        </van-sidebar>
      </div>
      <!-- 右半边 -->
      <div class="right">
        <!-- 搭建分类详情的路由出口-->
        <router-view></router-view>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { getCateItems } from "../../api/index";
// 引入想要使用的组件
import tabbar from "../../components//myTabbar/index.vue";

export default {
  data() {
    return {
      value: "",
      activeKey: 0,
      navList: [],
    };
  },
  components: {
    tabbar,
  },
  mounted() {
    this.getCateItems();
  },
  methods: {
    getCateItems() {
      getCateItems().then((res) => {
        // console.log(res, "分类页面的数据");
        this.navList = res.data.data.list;
        this.$router.push("/cate/sub?id=" + this.navList[0]?.id);
      });
    },
    onBack() {
      this.$router.back(-1);
    },
    
  },
  
};
</script>

<style scoped>
.content {
  display: flex;
}
</style>